<nz-card [nzTitle]="titleTemplate">
  <nz-empty *ngIf="tableDetails.length <= 0; else notHasValues"
            [nzNotFoundContent]="contentTemplate"
            [nzNotFoundFooter]="footerTemplate">
    <ng-template #contentTemplate>
    </ng-template>
    <ng-template #footerTemplate>
      <button nz-button nzType="primary" (click)="handlerOpenModal(actionTypeConform.create)">
        {{'common.add'|translate}}
      </button>
    </ng-template>
  </nz-empty>
  <ng-template #notHasValues>
    <nz-table #basicTable [nzData]="tableDetails" nzTableLayout="fixed">
      <thead>
      <tr>
        <th>{{'common.alias' | translate}}</th>
        <th>{{'common.name' | translate}}</th>
        <th nzCustomFilter>{{'common.host' | translate}}
          <nz-filter-trigger [(nzVisible)]="search.host.visible" [nzActive]="search.host.value"
                             [nzDropdownMenu]="searchHostMenu">
            <i nz-icon nzType="search"></i>
          </nz-filter-trigger>
        </th>
        <th>{{'common.protocol' | translate}}</th>
        <th>{{'common.type' | translate}}</th>
        <th>{{'common.username' | translate}}</th>
        <th>{{'common.version' | translate}}</th>
        <th>{{'common.action' | translate}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data" style="{{!data.status ? 'color: #F50;': ''}}">
        <td nzEllipsis>{{data.alias}}</td>
        <td nzEllipsis>{{data.name ? data.name : '-'}}</td>
        <td nzEllipsis>{{data.host}}</td>
        <td nzEllipsis>{{data.protocol}}</td>
        <td>
          <nz-avatar nzIcon="user" nzSrc="./renderer/assets/icon/source/{{data.type}}.svg"></nz-avatar>
        </td>
        <td nzEllipsis>{{data.username ? data.username : '-'}}</td>
        <td nzEllipsis>{{data.version ? data.version : '-'}}</td>
        <td>
          <button nz-button nzShape="circle" nzSize="small" nzType="primary"
                  nz-tooltip nzTooltipTitle="{{'common.edit' | translate}}">
            <i class="fa fa-edit" (click)="handlerOpenModal(actionTypeConform.update, data.alias)"></i>
          </button>
          <button nz-button nzShape="circle" nzSize="small" nzType="primary" [disabled]="!data.status"
                  nz-tooltip nzTooltipTitle="{{'common.copy' | translate}}">
            <i class="fa fa-copy" (click)="handlerOpenModal(actionTypeConform.copy, data.alias)"></i>
          </button>
          <button nz-button nzShape="circle" nzSize="small" nzType="dashed"
                  nz-tooltip nzTooltipTitle="{{'common.quote' | translate}}"
                  [routerLink]="['/query/query']" [queryParams]="{id: data.id, type: 'datasource'}">
            <i class="fa fa-reply-all"></i>
          </button>
          <button nz-button nzShape="circle" nzSize="small" nzDanger (click)="handlerDeleteModal(true, data)">
            <i class="fa fa-trash"></i>
          </button>
          <button *ngIf="!data.status" nz-button nzShape="circle" nzSize="small" nzType="primary"
                  nzDanger (click)="handlerShowMessage(data.alias, data?.message?.message)">
            <i class="fa fa-warning"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
    <nz-dropdown-menu #searchHostMenu="nzDropdownMenu">
      <div class="ant-table-filter-dropdown">
        <div class="search-box">
          <input type="text" nz-input placeholder="{{'common.search'|translate}}" [(ngModel)]="search.host.value"/>
          <button nz-button nzSize="small" nzType="primary" class="search-button" (click)="handlerSearch()">
            {{'common.search'|translate}}
          </button>
          <button nz-button nzSize="small" (click)="handlerSearchReset()">{{'common.reset'|translate}}</button>
        </div>
      </div>
    </nz-dropdown-menu>
  </ng-template>
</nz-card>
<ng-template #titleTemplate>
  <button nz-button nzType="primary" nzShape="circle" nzSize="small"
          nz-tooltip nzTooltipTitle="{{'common.add' | translate}}"
          (click)="handlerOpenModal(actionTypeConform.create)">
    <i class="fa fa-plus"></i>
  </button>
  <button nz-button nzType="dashed" nzShape="circle" nzSize="small"
          nz-tooltip nzTooltipTitle="{{'common.refresh' | translate}}"
          (click)="handlerRefresh()">
    <i class="fa fa-refresh"></i>
  </button>
</ng-template>
<nz-modal
  [(nzVisible)]="dialog.create"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  nzMaskClosable="false"
  nzWidth="80%"
  (nzOnCancel)="handlerCloseModal()">
  <ng-template #modalTitle>
    {{'common.datasource' | translate}}
  </ng-template>
  <ng-template #modalContent>
    <nz-steps [nzCurrent]="currentStep">
      <nz-step nzTitle="{{'common.type'|translate}}"></nz-step>
      <nz-step nzTitle="{{'common.configuration'|translate}}"></nz-step>
    </nz-steps>

    <div *ngIf="currentStep === 1">
      <div [nzGutter]="[8, 8]" nz-row>
        <div [nzSpan]="24" nz-col>
        </div>
        <div *ngFor="let engine of sourceTypes" [nzSpan]="24" nz-col>
          <app-component-antd-drivider [description]="engine.description" [title]="engine.name">
          </app-component-antd-drivider>
          <div *ngIf="engine.engines; else notHasEngines" [nzGutter]="[3, 20]" nz-row>
            <div *ngFor="let value of engine.engines" [nzSpan]="6" nz-col style="text-align: center;">
              <div class="">
                <nz-radio-group [(ngModel)]="formInfo.type" (ngModelChange)="handlerChange(value)">
                  <label [nzValue]="value.name" nz-radio-button>
                    <div *ngIf="value.experimental; else prodTemplate">
                      <nz-badge nzDot [nzTooltipTitle]="value.description" nz-tooltip>
                        <nz-avatar [nzShape]="'square'" [nzSize]="64" [nzSrc]="value.icon">
                        </nz-avatar>
                      </nz-badge>
                    </div>
                    <ng-template #prodTemplate>
                      <nz-avatar [nzShape]="'square'" [nzSize]="64" [nzSrc]="value.icon"
                                 [nzTooltipTitle]="value.description" nz-tooltip>
                      </nz-avatar>
                    </ng-template>
                  </label>
                </nz-radio-group>
              </div>
            </div>
          </div>
          <ng-template #notHasEngines>
            <div [nzSpan]="24" nz-col>
              <app-component-antd-empty></app-component-antd-empty>
            </div>
          </ng-template>
        </div>
      </div>
    </div>

    <div *ngIf="currentStep === 2">
      <form nz-form [formGroup]="validateForm">
        <app-component-datasource-common [configure]="formInfo"
                                         (emitterValue)="handlerEmitterValue($event)">
        </app-component-datasource-common>
        <app-component-antd-drivider title="{{'common.experimental'|translate}}">
        </app-component-antd-drivider>
        <div [nzGutter]="[8, 8]" nz-row>
          <div [nzSpan]="3" nz-col>
          </div>
          <div [nzSpan]="18" nz-col>
            <nz-form-item>
              <nz-form-label [nzSm]="4" [nzXs]="24" nzTooltipTitle="{{'placeholder.maxTotal'|translate}}">
                <span>{{'common.maxTotal'| translate}}</span>
              </nz-form-label>
              <nz-form-control>
                <input nz-input id="maxTotal" formControlName="maxTotal" [(ngModel)]="formInfo.maxTotal"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div [nzSpan]="3" nz-col>
          </div>
        </div>
      </form>
    </div>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handlerNext()" [disabled]="!showButton.next"
            *ngIf="currentStep === 1">
      <span>{{'common.next'|translate}}</span>
    </button>
    <div *ngIf="currentStep === 2">
      <button nz-button nzType="default" (click)="handlerPrevious()">
        <span>{{'common.previous'|translate}}</span>
      </button>
      <button [disabled]="loading.button || !formInfo.validate" [nzLoading]="loading.button" nz-button nzType="dashed"
              (click)="handlerTest()">
        {{'common.test' | translate}}
      </button>
      <button nz-button nzType="primary" [disabled]="disabled.button" (click)="handlerProcess()">
        {{'common.ok' | translate}}
      </button>
    </div>
  </ng-template>
</nz-modal>
<app-component-datasource-delete *ngIf="applyDeleteValue?.visible" [applyValue]="applyDeleteValue"
                                 (emitter)="handlerDeleteModal(null, null, $event)">
</app-component-datasource-delete>
